<template>
  <div class="test">
    vue组件 {{ title }}
    <div class="test-1">这是另外一个div</div>
    <button @click="add">点我</button>
    <div class="test-2">{{ num }}</div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      num: 0,
      title: "webpack-vue-这里的vue单文件组件",
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
};
</script>

<style lang="less">
.test {
  width: 500px;
  height: 500px;
  // font-size: 25px;
  background: url(./../img/webpack-png.png);
  color: aqua;
}
.test-1 {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 4px solid #ccc;
  background: url(./../img/webpack-svg.svg);
}
.test-2 {
  background: #fff;
  padding: 20px;
  color: #000;
}
</style>